<html lang="cn">

<head>
  <meta charset="UTF-8">
  <script src="../rem.js"></script>
  <meta name="format-detection" content="telephone = no">
  <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <title></title>
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script> -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="../common.css">
  <link rel="stylesheet" href="./addBrand.css">
  <script>
    function rembig(){
      setRemSize()
      window.addEventListener("resize",setRemSize,false)
      function setRemSize(){
        var width = document.documentElement.clientWidth
        if (width > 750) {
            width = 750
        }
        var _clientWidth = width / 7.5+'px'
        document.documentElement.style.fontSize = _clientWidth
      }
    }
    rembig()
  </script>
</head>

<body>
  <form class="content">
    <img class="topImage" src="../images/homeAddBrand/ppsj_banner_img.png">
    <div class="fengexian"></div>
    <ul class="firstNeedInput needInputGroup">
      <div class="title">品牌详情</div>
      <li>
        <div class="label"><span>公司名称</span></div>
        <input type="text" value="" name="corporateName" placeholder="请输入公司名称" >
      </li>
      <li>
        <div class="label"><span>品牌名称</span></div>
        <input type="text"  value="" name="brandName" placeholder="请输入品牌名称">
      </li>
      <li>
        <div class="label"><span>成立时间</span></div>
        <input type="text"  value="" name="companyAddress" placeholder="请输入成立时间">
      </li>
      <li>
        <div class="label"><span>官方网站</span></div>
        <input type="text"  value="" name="officialWebsite" placeholder="请输入验证码">
        <div class="error">
          <img src="../images/homeAddBrand/error.png">
          <span>网址有误</span>
        </div>
      </li>
      <li>
        <div class="label"><span>公司地址</span></div>
        <input type="text"  value="" name="officialWebsite" placeholder="请输入公司地址">
        <div class="error">
          <img src="../images/homeAddBrand/error.png">
          <span>网址有误</span>
        </div>
      </li>  
    </ul>
    <div class="fengexian"></div>
    <div class="secondNeedInput needFileGroup">
      <div class="title">
        上传证件
        <div class="remarks">(上传图片大小请控制在5M以内）</div>
      </div>
      <div style="width: 100%;display:flex;justify-content:space-between">
        <div class="needFile">
          <div class="mark">
            <img src="../images/加载中.gif">
          </div>
          <div class="uploadFail">
            <img src="../images/homeAddBrand/error.png">
            <button type="button" class="uploadFailButton" ac>重新上传</button>
          </div>
          <label>
            <img class="showImage" />
            <div class="slotClass">
              <img src="../images/homeAddBrand/camera.png">
              <div class="label" style="width:auto"><span>品牌logo</span></div>
            </div>
            <input class="fileClass" type="file" accept="image/*" id="img0" />
          </label>
        </div>
        <div class="needFile">
          <div class="mark">
            <img src="../images/加载中.gif">
          </div>
          <div class="uploadFail">
            <img src="../images/homeAddBrand/error.png">
            <button type="button" class="uploadFailButton">重新上传</button>
          </div>
          <label>
            <img class="showImage" />
            <div class="slotClass">
              <img src="../images/homeAddBrand/camera.png">
              <div class="label" style="width:auto"><span>营业执照</span></div>
            </div>
            <input class="fileClass" type="file" accept="image/*" id="img1"/>
          </label>
        </div>
      </div>

      <div style="width: 100%;display:flex;justify-content:space-between">
        <div class="needFile">
          <div class="mark">
            <img src="../images/加载中.gif">
          </div>
          <div class="uploadFail">
            <img src="../images/homeAddBrand/error.png">
            <button type="button" class="uploadFailButton">重新上传</button>
          </div>
          <label>
            <img class="showImage" />
            <div class="slotClass">
              <img src="../images/homeAddBrand/camera.png">
              <div class="label" style="width:auto"><span>品牌logo</span></div>
            </div>
            <input class="fileClass" type="file" accept="image/*" id="img2" />
          </label>
        </div>
        <div class="needFile">
          <div class="mark">
            <img src="../images/加载中.gif">
          </div>
          <div class="uploadFail">
            <img src="../images/homeAddBrand/error.png">
            <button type="button" class="uploadFailButton">重新上传</button>
          </div>
          <label>
            <img class="showImage" />
            <div class="slotClass">
              <img src="../images/homeAddBrand/camera.png">
              品牌logo
            </div>
            <input class="fileClass" type="file" accept="image/*" id="img3" />
          </label>
        </div>
      </div>

      <div style="width: 100%;display:flex;justify-content:space-between">
        <div class="needFile">
          <div class="mark">
            <img src="../images/加载中.gif">
          </div>
          <div class="uploadFail">
            <img src="../images/homeAddBrand/error.png">
            <button type="button" class="uploadFailButton">重新上传</button>
          </div>
          <label>
            <img class="showImage" />
            <div class="slotClass">
              <img src="../images/homeAddBrand/camera.png">
              品牌logo
            </div>
            <input class="fileClass" type="file" accept="image/*" id="img4" />
          </label>
        </div>
        <div class="needFile">
          <div class="mark">
            <img src="../images/加载中.gif">
          </div>
          <div class="uploadFail">
            <img src="../images/homeAddBrand/error.png">
            <button type="button" class="uploadFailButton">重新上传</button>
          </div>
          <label>
            <img class="showImage" />
            <div class="slotClass">
              <img src="../images/homeAddBrand/camera.png">
              品牌logo
            </div>
            <input class="fileClass" type="file" accept="image/*" id="img5" />
          </label>
        </div>
      </div>

      <div class="error" style="width:100%">
        <img src="../images/homeAddBrand/error.png">
        <span>商标注册不正确，请重新输入</span>
      </div>
      <div class="subTitle">经营范围</div>
      <div class="textarea">
        <textarea id="area0" name="jxfw" placeholder="请输入经营范围"></textarea>  
        <p><span class="textCount0">0</span>/800</p>  
      </div>
      <div class="subTitle">经营范围</div>
      <div class="textarea">
        <textarea id="area1" name="jxfw" placeholder="请输入经营范围"></textarea>  
        <p><span class="textCount1">0</span>/800</p>  
      </div>
      <div class="subTitle">经营范围</div>
      <div class="textarea">
        <textarea id="area2" name="jxfw" placeholder="请输入经营范围"></textarea>  
        <p><span class="textCount2">0</span>/800</p>  
      </div>
      <div class="error" style="width:100%;margin-top:0.1rem">
        <img src="../images/homeAddBrand/error.png">
        <span>商标注册不正确，请重新输入</span>
      </div>
    </div>
    <div class="fengexian"></div>
    <ul class="thirdNeedInput needInputGroup">
      <div class="title">身份验证</div>
      <li>
        <div class="label"><span>手机号</span></div>
        <input type="text" value="" name="phone" placeholder="请填写手机号">
      </li>
      <li>
        <div class="label"><span>验证码</span></div>
        <input type="text" value="" name="code" placeholder="请输入验证码">
        <div class="code">
          <img src="">
        </div>
        <div class="rowError">
          <div class="error" style="flex: 1;justify-content: flex-start;">
            <img src="../images/homeAddBrand/error.png">
            <span>网址有误</span>
          </div>
          <div style="flex: 1"></div>
          <span>看不清，换一张</span>
        </div>
      </li>
      <li>
        <div class="label"><span>短信验证码</span></div>
        <input type="text" value="" name="smsCode" placeholder="请输入短信验证码">
        <div class="getCode">获取验证码</div>
        <div class="rowError" style="padding-top: 0.2rem">
          <div class="error" style="flex: 1;justify-content: flex-start;">
            <img src="../images/homeAddBrand/error.png">
            <span>网址有误</span>
          </div>
        </div>
      </li>
    </ul>
    <div class="submit">
      <a href="tel:114">
        <button type="button">客服</button>
      </a>
      <button type="button" class="buttonSubmit">提交反馈</button>
    </div>
    <div class="fengexian"></div>
  </form>
  <div class="bottomInfo">
    <img src="../images/报名活动页_slices/WeChat0cb4f1f9fa69309f03cd06c58006f7f2.png">
    <div style="color: rgba(156,156,156,1)">客服电话：123456789</div>
    <div class="feedback"><span>意见反馈</span> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<span>推荐参与活动</span></div>
    <div class="bottomTitle">中信品牌网</div>
    <p>京ICP备20190601号-1</p>
  </div>
  <div style="height: 0.98rem;"></div>
  <div class="bottomTab">
    <div class="tab tab1">
      <img src="../images/home_btn_icon@2x.png" alt="" srcset="">
      <p>首页</p>
    </div>
    <div class="tab tab2" style="border-left:1px solid #D3141C">
      <img src="../images/back_btn_icon@2x.png" alt="" srcset="">
      <p>返回投票</p>
    </div>
  </div>
  <div class="toast">
    信息填写不完整，请检查并修改
  </div>
</body>
</html>

<script>

  var addBrandInit = {
    getCode: function () {
      var timer, z
      $('.getCode').click(function () {
        if (z) return
        console.log('???')
        z = 60
        timer = setInterval(() => {
          z--
          $('.getCode').text(z + 's')
          if (!z) {
            z = 0
            $('.getCode').text('获取验证码')
            clearInterval(timer)
          }
        }, 1000)
      })
    },
    submit: function () {
      // <div class="needFile">
      //   <div class="mark">
      //     <img src="../images/加载中.gif">
      //   </div>
      //   <div class="uploadFail">
      //     <img src="../images/homeAddBrand/error.png">
      //     <button type="button" class="uploadFailButton" ac>重新上传</button>
      //   </div>
      //   <label>
      //     <img class="showImage" />
      //     <div class="slotClass">
      //       <img src="../images/homeAddBrand/camera.png">
      //       品牌logo
      //     </div>
      //     <input class="fileClass" type="file" accept="image/*" id="img0" />
      //   </label>
      // </div>
      function noneOther (name, index, display) {
        var allStatus = ['.mark', '.fileClass', '.uploadFail', '.showImage', '.uploadFail', '.slotClass', '.uploadFailButton']
        for (let i = 0; i < allStatus.length; i++) {
          if (name === allStatus[i]) {
            allStatus.splice(i, 1)
          }
        }
        for (let j = 0; j < allStatus.length; j++) {
          $($(allStatus[j])[index]).css('display', 'none')
        }
        $($(name)[index]).css('display', display)
        return $($(name)[index])
      }
      var fileClasses = $('.fileClass')
      var uploadFailButtons = $('.uploadFailButton')
      // var uploadFail = $('.uploadFail')
      // var showImages = $('.showImage')
      // var uploadFails = $('.uploadFail')
      // var slotClasses = $('.slotClass')
      for (var i = 0; i < 6; i++) {
        (function (i) {
          $(fileClasses[i]).change(function () {
            var file = this.files[0]
            if (window.FileReader) {
              var reader = new FileReader()
              reader.readAsDataURL(file)
              reader.onloadend = function (e) {
                console.log(e, i, file)
                noneOther('.mark', i, 'flex')
                // noneOther('.showImage', i, 'flex').attr('src', '')
                // var params = new FormData()
                // params.append('file',oFiles[0])
              }
            }
          })
          uploadFailButtons.click(function () {
            document.getElementById('img' + i).click()
          })
        })(i)
      }
      $('.buttonSubmit').click(function () {
        var t = $('form').serializeArray()
        console.log(t)
      })
    },
    toast: function () {
      $('.buttonSubmit').click(function () {
        $('.toast').css('display', 'flex')
      })
    },
    area: function () {
      for (var i = 0; i < 3; i++) {
        (function (i) {
          $('#area' + i).on('input propertychange', function() {
            var $this = $(this),  
                _val = $this.val(),
                count = ""
            if (_val.length > 800) {  
              $this.val(_val.substring(0, 800))
            }  
            count = $this.val().length
            $(".textCount" + i).text(count)
          })
        })(i)
      }
    }
  }
  $(document).ready(function () {
    for (var i in addBrandInit) {
      addBrandInit[i]()
    }
  })
</script>
